<template>
  <!-- PAY STATUS = 0;//未付款
	PAY STATUS = 1; //已付款
	PAY STATUS = 2;//支付超时
	PAY STATUS = 3;//订单无需支付
	PAY STATUS = 4;//支付扣款中
	PAY STATUS = 11;//支付分待用户确认
	PAY STATUS = 99;//退款 -->
  <view>
    <scroll-view scroll-y="true">
      <view class="commoditys-container">
        <!-- 上面审核订单 -->
        <view
          class="view_white w700 mt20"
          style="margin-bottom: 15px; margin-left: 13px; margin-right: 13px;"
          v-if="
            order.pay_status !== 1 && order.pay_status !== 3 && !needPayFlag
          "
        >
          <image
            src="../../static/images/jiesuan.png"
            style="width: 140rpx; height: 140rpx; margin-top: 40rpx"
          >
          </image>
          <view class="goodsinfo">
			  <!-- v-if="order.pay_status === 0" -->
            <view
              style="
                margin-top: 32rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
              "
              
            >
              <text style="color: #ff4a00; font-size: 44rpx; font-weight: bold"
                >已关门,结算中</text
              >
              <text style="color: #f3a140; font-size: 28rpx; margin: 20rpx"
                >请放心离开，识别需要一点时间,订单结算结果稍后在[我的-已结算订单]查询</text
              >
            </view>
          </view>
        </view>
        <finishOrder :orderDetail="order" v-if="order.pay_status === 1">
        </finishOrder>
        <notNeedPay :orderDetail="order" v-if="order.pay_status === 3">
        </notNeedPay>
        <needPay :orderDetail="order" v-if="needPayFlag"> </needPay>

        <view class="view_white w700 mt20 map-container" style="padding-top: 18px; margin-left: 13px; margin-right: 13px;">
          <view style="margin-bottom: 10rpx;">
            <text class="fs32" style="color: #5f5c5c; margin-right: 5px;">DMG余额 :</text>
            <text class="fs32 jeclass" style="color: red;">{{ money_dmg.toFixed(2) }}</text>
          </view>
          <view class="map-image-wrapper">
            <image class="map-image" src="/static/ditu1.png"></image>
            <view class="coin-container">
              <view 
                v-for="coin in coinList" 
                :key="coin.id"
                class="coin"
                :class="`coin${coin.id}`"
                :data-key="coin.id"
                :style="{
                  'left': coin.left + '%',
                  'top': coin.top + '%',
                  'animation-delay': coin.delay,
                  transform: coin.isCollected ? 
                      `translate(${coin.targetX}px, ${coin.targetY}px) scale(0.5)` : 'none'
                }"
                @click="collectCoin(coin.id)"
              > 
                <image src="../../static/diamond2.png" mode="aspectFit" />
                <text style="font-size: 20rpx; color: #333; margin-left: -10px; display: inline-block; animation: bounce 1.5s infinite ease-in-out; -webkit-animation: bounce 1.5s infinite ease-in-out;">DMG:{{coin.dmg}}</text>
              </view>
            </view>
          </view>
          <view class="imageFont">DMG，正是记录我们这段伟大航程的星图与航行日志。在这里,你付出的每一份努力,达成的每一个里程碑,都将化为璀璨的“星能积分”,点亮我们的星图，共同书写属于DMG的、波澜壮阔的遥远故事......</view>
        </view>
        <!-- <cardShowList
          title="订单详情"
          v-if="
            order.order_no &&
            order.pay_status !== 1 &&
            order.pay_status !== 3 &&
            !needPayFlag
          "
        >
          <view class="fs26 pl20">
            <view class="orderListLine">
              <text class="mr16">订单编号:</text>
              <text class="sf">{{ order.order_no }}</text>
            </view>
            <view class="orderListLine">
              <text class="mr16">订单时间:</text>
              <text class="sf">{{ order.create_time }}</text>
            </view>
            <view class="orderListLine">
              <text class="mr16">用户姓名:</text>
              <text class="sf">{{ order.user.nickname }}</text>
            </view>
            <view class="orderListLine">
              <text class="mr16">订单状态:</text>
              <text class="sf">已完成</text>
            </view>
            <view class="orderListLine">
              <text class="mr16">设备地址:</text>
              <text class="sf">{{ order.device.location }}</text>
            </view>
          </view>
        </cardShowList> -->
        <view class="h100"></view>
      </view>
    </scroll-view>
		<uni-popup ref="popup" type="center">
			<view class="rechargePopup">
				<view
					class="close"
					style="position: absolute; right: 0rpx; top: -70rpx"
				>
					<uni-icons @click="close" type="close" size="30"></uni-icons>
				</view>
				<view class="title">充值</view>
				<view class="box">
					<view
						@click="choose(item)"
						:class="{ select: item.isSelect }"
						class="m-item"
						v-for="item in rechargeRule"
						:key="item.recharge"
					>
						<view class="send">送{{ item.present }}</view>
						<text>¥</text>
						{{ item.recharge }}
					</view>
				</view>

				<view class="button" @click="subRecharge">充值</view>
			</view>
		</uni-popup>
  </view>
</template>

<script setup>
import { computed, onMounted, ref, getCurrentInstance } from 'vue'
import { onUnload } from '@dcloudio/uni-app'
import { uniFetch } from '../../api/uni-fetch';
import { useUserStore } from '../../store/user'
import finishOrder from './components/finishOrder.vue'
import notNeedPay from './components/notNeedPay.vue'
import needPay from './components/needPay.vue'

const instance = getCurrentInstance();
const appid = instance.appContext.config.globalProperties.$appid;

const userStore = useUserStore()
const props = defineProps(['orderId'])
const popup = ref(null)

const money_dmg = ref(0)
onMounted(async () => {
  const res = await uniFetch.post('/user/info', {
    token: uni.getStorageInfoSync('token')
  });
	money_dmg.value = Number(res.data?.user?.dmg_money || 0)
})

// 金币
const coinList = ref([]); // 金币数组
const coinSound = "/static/images/sound3.mp3"; // 准备音效文件放在static目录

function collectCoin(coinId) {
		// 立即获取并标记金币
		const index = coinList.value.findIndex(c => c.id === coinId);
		if (index === -1) return;
		const coin = coinList.value[index];
		
		// 立即标记为已收集，提供即时视觉反馈
		coin.isCollected = true;
		
		// 立即设置一个微小的位移，让用户感觉有即时反馈
		coin.targetX = 0;
		coin.targetY = -5;
		
		// 播放音效 - 使用setTimeout让出主线程一点时间，确保UI优先更新
		setTimeout(() => {
			const innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.src = coinSound;
			innerAudioContext.play();
		}, 0);

		// 获取位置信息的函数
		function getTargetPosition() {
			// 创建新的查询实例以避免缓存问题
			const query = uni.createSelectorQuery().in(instance);
			
			// 尝试多个可能的选择器
			const selectors = ['.dmg-num', '.jeclass', '.money-info'];
			let currentSelectorIndex = 0;
			
			function tryNextSelector() {
				if (currentSelectorIndex >= selectors.length) {
					console.warn('无法找到目标位置元素');
					return;
				}
				
				const selector = selectors[currentSelectorIndex];
				currentSelectorIndex++;
				
				// 创建新的查询实例
				const currentQuery = uni.createSelectorQuery().in(instance);
				
				currentQuery.select(selector).boundingClientRect(data => {
					if (data) {
						// 使用新的查询实例获取金币位置
						const coinQuery = uni.createSelectorQuery().in(instance);
						coinQuery.select(`.coin${coinId}`).boundingClientRect(coinRect => {
							if (!coinRect) return;
							
							// 获取页面滚动信息
							const windowInfo = wx.getWindowInfo ? wx.getWindowInfo() : { windowHeight: 0 };
							const { windowHeight } = windowInfo;
							const scrollTop = uni.pageScrollGetScrollTop ? uni.pageScrollGetScrollTop() : 0;
							
							// 计算中心点坐标，考虑滚动位置
							const targetCenterX = data.left + data.width / 2;
							const targetCenterY = data.top + data.height / 2 + scrollTop;
							const coinCenterX = coinRect.left + coinRect.width / 2;
							const coinCenterY = coinRect.top + coinRect.height / 2 + scrollTop;
							
							// 添加微调参数，根据实际效果调整
							const adjustmentX = -10; // 向左微调10px
							const adjustmentY = 0; // 向上微调20px
							
							// 计算并设置精确的目标位置
							coin.targetX = targetCenterX - coinCenterX + adjustmentX;
							coin.targetY = targetCenterY - coinCenterY + adjustmentY;
						}).exec();
					} else {
						// 如果当前选择器未找到元素，尝试下一个
						tryNextSelector();
					}
				}).exec();
			}
			
			// 开始尝试选择器
			tryNextSelector();
		}
		
		// 立即开始获取位置信息
		getTargetPosition();
		
		// 异步处理API请求，不阻塞UI
		setTimeout(async () => {
			try {
				const res = await uniFetch.post("/dmg/get", {
						id: coinId,
				});
			
			
				if (res.code === 10000) {
							// 更新DMG数量
							money_dmg.value = Number(res?.data?.dmg_money || 0);
						}
					} catch (error) {
						console.error('获取DMG失败:', error);
					}
			}, 100);
			
		// 动画结束后移除金币元素
		setTimeout(() => {
			// 先缩小动画
			coin.scale = 0;
			
			// 再移除元素
			setTimeout(() => {
				coinList.value = coinList.value.filter(c => c.id !== coinId);
			}, 200);
		}, 550);
	}

async function getDMG() {
		const res = await uniFetch.post("/dmg/list");
		if (res.code === 10000) {
			const newCoinList = [];
			const minDistance = 6; // 最小距离百分比，基于40rpx的金币大小
			
			res.data.forEach((item) => {
				let isValidPosition = false;
				let attempts = 0;
				const maxAttempts = 20; // 最大尝试次数
				
				while (!isValidPosition && attempts < maxAttempts) {
					attempts++;
					// 生成候选位置
					const candidateLeft = 5 + Math.random() * 90; // 左右范围5%-95%
					const candidateTop = 5 + Math.random() * 90;  // 上下范围5%-95%
					
					// 检查是否与已有金币重叠
					isValidPosition = !newCoinList.some(coin => {
						const distance = Math.sqrt(
							Math.pow(coin.left - candidateLeft, 2) + 
							Math.pow(coin.top - candidateTop, 2)
						);
						return distance < minDistance;
					});
					
					// 如果位置有效，保存并跳出循环
					if (isValidPosition) {
						item.left = candidateLeft;
						item.top = candidateTop;
						item.delay = Math.random() * 2 + 's';
						item.isCollected = false;
						newCoinList.push(item);
					}
				}
				
				// 如果达到最大尝试次数仍未找到有效位置，仍然添加但可能会有重叠
				if (!isValidPosition) {
					item.left = 5 + Math.random() * 90;
					item.top = 5 + Math.random() * 90;
					item.delay = Math.random() * 2 + 's';
					item.isCollected = false;
					newCoinList.push(item);
				}
			});
			
			coinList.value = newCoinList;
		} else {
			uni.showToast({
				icon: "none",
				title: res.msg,
			});
		}
	}
	getDMG();

// 轮询订单状态
	const queryTimer = ref(null);

// #ifdef MP-ALIPAY
// 设置navaigationbar颜色
my.setNavigationBarColor({
  frontColor: '#ffffff', // 仅支持 #ffffff 和 #000000
  backgroundColor: '#3c86d0 ', // 导航栏背景色，支持十六进制颜色值
})
// #endif

// 展开收起功能
const expanded = ref(false)

function toggleExpand() {
  expanded.value = !expanded.value
}

const rechargeRule = ref([
  {
    recharge: 100,
    present: 20,
    isSelect: true,
  },
  {
    recharge: 300,
    present: 150,
    isSelect: false,
  },
  {
    recharge: 600,
    present: 400,
    isSelect: false,
  },
])

function choose(info) {
  rechargeRule.value.forEach((item) => {
    item.recharge === info.recharge
      ? (item.isSelect = true)
      : (item.isSelect = false)
  })
}

function close() {
  popup.value.close()
}
async function subRecharge() {
  const money = rechargeRule.value.filter((item) => {
    if (item.isSelect) {
      return item.recharge
    }
  })
  const res = await uniFetch.post('/dmg/recharge', {
    amount: money[0].recharge,
  })
  if (res.code === 10000) {
    wx.requestPayment({
      timeStamp: res.data.timestamp + '',
      nonceStr: res.data.nonceStr,
      package: res.data.package,
      signType: 'MD5',
      paySign: res.data.paySign,
      success: function (res) {
        uni.showToast({
          icon: 'none',
          title: '充值成功',
        })
        userStore.userInfo.dmg_money =
          money[0].recharge * 1 + userStore.userInfo.dmg_money * 1
        popup.value.close()
      },
      fail: function (err) {
        console.log(err, '失败返回')
      },
      complete: function (rej) {
        console.log(rej, '失败原因返回')
      },
    })
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }
}

const order = ref({})
const od_Status = ref(false)
let needPayFlag = ref(null)
async function getDetail() {
  const res = await uniFetch.post('/order/detail', {
    id: props.orderId,
    sid: 'OHAYkLo3LJcqQmq65co5owmbCNipBrIg', // 可能需要替换为实际的 sid 值
  })
  if (res.code === 10000) {
    order.value = res.data
    playEnd()
    console.log('getDetail', order.value)
    od_Status.value = false
    needPayFlag.value =
      res.data.pay_status === 0 &&
      (res.data.pay_type === 99 ||
        res.data.pay_type === 98 ||
        res.data.pay_type === 97)
    if (order.value.pay_status == 1) {
      // if (this.timer) {
      //注销定时器
      console.log('注销定时器')
      // clearTimeout(this.timer);
      // this.timer = null;
      // }
    }
  } else {
    uni.showToast({
      icon: 'none',
      title: res.msg,
    })
  }
}
getDetail()

queryTimer.value = setInterval(() => {
  getDetail();
}, 5000);

const waresTotal = computed(() => {
  let sum = 0
  if (!order.value) {
    return sum
  }
  order.value.goods.forEach((item) => (sum += item.count))
  return sum
})

// 播放音频
let innerAudioContext

function playEnd() {
  // 如果订单状态为已完成，则不播放音频
  if (order.value.pay_status === 1) {
    return;
  }
  
  // #ifdef MP-WEIXIN
  innerAudioContext = wx.createInnerAudioContext({
    useWebAudioImplement: true,
  })
  // #endif
  // #ifdef MP-ALIPAY
  innerAudioContext = uni.createInnerAudioContext()
  // #endif
  innerAudioContext.src = 'https://dmg.nex-i.cn/res/wx/music2.mp3'
  innerAudioContext.autoplay = true
  innerAudioContext.play() //播放音频
}

// onShow(() => {
//   uni.$on('playend', function () {
//     playEnd()
//   })
// })
// onLoad(() => {
//   playEnd()
// })
onUnload(() => {
  innerAudioContext.stop()

  clearInterval(queryTimer.value);
})

function videoErrorCallback(e) {
  console.log(e, '$$$$$')
}
</script>

<style lang="scss" scoped>
.page {
  background: #f3f3f3;
}

@keyframes flying2 { 
  0% { transform: translateY(10rpx); }
  50% { transform: translateY(-10rpx); }
  100% { transform: translateY(10rpx); }
}

@-webkit-keyframes bounce { 
  0%, 100% { -webkit-transform: translateY(0); }
  50% { -webkit-transform: translateY(-15px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* 确保text元素的animation能正常工作 */
.coin text {
  display: inline-block !important;
  animation: bounce 1.5s infinite ease-in-out !important;
  -webkit-animation: bounce 1.5s infinite ease-in-out !important;
  transform: none !important; /* 确保不受其他transform影响 */
}

@keyframes fadeout2 {
  from {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }
  to {
    opacity: 0;
    transform: scale(1.2) translate(-150rpx, 0);
  }
}

.coin-container {
		position: absolute;
		top: 0;
    left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 10;
		.coin {
 						position: absolute;
 						width: 40rpx;
 						height: 40rpx;
 						transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
 						pointer-events: auto;
 						z-index: 10;
			image {
        width: 100%;
        height: 100%;
        transition: transform 1s;
        -webkit-animation: bounce 1.5s infinite ease-in-out;
        animation: bounce 1.5s infinite ease-in-out;
      }
      text {
           transition: transform 1s;
         }
			&.fade-out-2 {
				opacity: 0;
				image {
						transform: rotate(720deg);
					}
			}
		}
	}

.rechargePopup {
  // background-color: #fefefe;
  width: 80vw;
  height: 70vh;
  padding: 30rpx 25rpx;
  border-radius: 20rpx;
  background: linear-gradient(to bottom, #f0e9d2 0%, #fff8df 50%, #f0e9d2 100%);

  .title {
    text-align: center;
    font-size: 38rpx;
    color: #262427;
    height: 65rpx;
    line-height: 65rpx;
    margin-bottom: 30rpx;
    border-bottom: 1px solid #f0e9d2;
  }

  .box {
    display: flex;
    justify-content: space-between;
    height: 30vh;
    padding-top: 10vh;

    .m-item {
      position: relative;
      width: 24vw;
      height: 80rpx;
      text-align: center;
      padding: 80rpx 0 20rpx;
      box-shadow: #d6d6d6 5rpx 10rpx 30rpx, -4px -4px 4px -2px #ffb70f inset;
      border-radius: 15rpx;
      color: #ffb70f;
      font-size: 40rpx;
      word-spacing: 15rpx;
      background-color: #1c211e;
      overflow: hidden;

      text {
        font-size: 27rpx;
        padding-right: 3rpx;
      }

      &:before {
        content: '';
        position: absolute;
        z-index: 99;
        transform: rotateZ(-13deg);
        top: -30rpx;
        left: -100rpx;
        height: 300rpx;
        width: 60rpx;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.4) 50%,
          rgba(255, 255, 255, 0) 100%
        );
        animation: toright 1.5s 0s 1 ease-in-out;

        @keyframes toright {
          100% {
            left: 500rpx;
          }
        }
      }

      .send {
        content: '送50';
        position: absolute;
        z-index: 70;
        top: 0;
        left: 0;
        padding: 10rpx 14rpx;
        border-radius: 10rpx;
        background-color: #f7002f;
        color: #f3f3f3;
        font-size: 30rpx;
      }
    }

    .m-item.delay1:before {
      animation-delay: 0.5s;
    }

    .m-item.delay2:before {
      animation-delay: 1s;
    }

    .select {
      position: relative;
      background-color: #ffb70f;
      color: #1c211e;
      box-shadow: #d6d6d6 5rpx 10rpx 30rpx, -4px -4px 4px -2px #1c211e inset;
      animation: heartbeat 1.5s infinite;
      border: 3rpx solid #1c211e;

      &::after {
        content: '';
        position: absolute;
        z-index: 60;
        left: 4%;
        top: 4%;
        width: 90%;
        height: 90%;
        border-radius: 10rpx;
        border: 4rpx solid #fff8d955;
        box-sizing: border-box;
        // background-color: #333333;
      }

      @keyframes heartbeat {
        0%,
        100% {
          transform: scale(0.9);
        }

        14% {
          transform: scale(1.1);
        }

        28% {
          transform: scale(0.9);
        }

        42% {
          transform: scale(1.1);
        }

        70% {
          transform: scale(0.9);
        }
      }
    }
  }

  .button {
    position: relative;
    margin: 120rpx 40rpx 100rpx;
    background-color: #262427;
    color: #ffb70f;
    line-height: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
    text-align: center;
    font-size: 40rpx;

    &:before {
      content: '优惠';
      position: absolute;
      top: -10rpx;
      right: 10rpx;
      height: 50rpx;
      line-height: 50rpx;
      background-color: #f7002f;
      border-radius: 15rpx;
      color: #f3f3f3;
      padding: 0 15rpx;
      font-size: 28rpx;
      animation: wobble 0.8s infinite;

      @keyframes wobble {
        0% {
          transform: translateX(0%);
        }

        15% {
          transform: translateX(-25%) rotate(-5deg);
        }

        30% {
          transform: translateX(20%) rotate(3deg);
        }

        45% {
          transform: translateX(-15%) rotate(-3deg);
        }

        60% {
          transform: translateX(10%) rotate(2deg);
        }

        75% {
          transform: translateX(-5%) rotate(-1deg);
        }

        100% {
          transform: translateX(0%);
        }
      }
    }
  }
}

.commoditys-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f3f3f3;
  min-height: 100vh;
  padding: auto 20px !important;
}

.view_white {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.shop {
  width: 350rpx;
  height: 350rpx;
  background-color: red;
  position: fixed;
  top: 30%;
  left: 25%;
  border-radius: 20rpx 20rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  z-index: 40;

  .shop-ima {
    width: 300rpx;
    height: 100rpx;
    position: absolute;
    top: -50rpx;
    z-index: 40;

    image {
      width: 100%;
      height: 100%;
      border-radius: 20rpx 20rpx;
    }
  }

  .shop-top {
    font-size: 70rpx;
    font-weight: 600;
    margin-top: 60rpx;
    color: #ffda8b;
  }

  .shop-main {
    font-size: 22rpx;
    margin-top: 10rpx;
    color: #fff;
  }

  .shop-x {
    width: 80rpx;
    height: 80rpx;
    position: absolute;
    top: -80rpx;
    right: -50rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .shop-bom {
    width: 80%;
    height: 80rpx;
    font-size: 40rpx;
    background-color: #ffda8b;
    border-radius: 40rpx 40rpx;
    margin-top: 25rpx;
    color: #f7002f;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.commod {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .commod-img {
    width: 70%;
    height: 900rpx;
    margin-top: 150rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .commod-text {
    width: 60%;
    height: 100rpx;
    background-color: red;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35rpx;
    border-radius: 20rpx 20rpx;
    margin-top: 50rpx;
  }
}

// .commod{
// 	width:700rpx;
// 	height:500rpx;
// 	background:#FF6F08;
// 	position: fixed;
// 	top:50%;
// 	left:50%;
// 	margin-top: -250rpx;
// 	margin-left:-350rpx;
// 	border-radius: 30rpx;
// 	.commod-center{
// 		display: flex;
// 		justify-content: center;
// 		align-items: center;
// 		height:350rpx;
// 	.commod-lt{

// 		image{
// 			width:300rpx;
// 			height:200rpx;
// 		}
// 	}
// 	.commod-rt{
// 		color:#fff;
// 		.commod-titel{
// 			font-size: 34rpx;
// 			font-weight: 550;
// 			margin-bottom: 17rpx;
// 		}
// 		.commod-ts{
// 			font-size: 28rpx;
// 			margin-bottom: 22rpx;
// 		}
// 		image{
// 			width:39rpx;
// 			height:39rpx;
// 			vertical-align: middle;
// 		}
// 		text{
// 			font-size:28rpx;
// 			margin-left: 10rpx;
// 		}
// 	}
// 	}
// 	.commod-bottom{
// 		font-size: 34rpx;
// 		text-align: center;
// 		margin: 0 auto;
// 		color:#E4FF00;
// 		text{
// 			display: block;
// 		}

// 	}
// }

/*如果审核走上面*/

.notic-top {
  height: 50rpx;
  background: #fee326;
  text-align: center;

  image {
    height: 22rpx;
    width: 26rpx;
    margin-right: 12rpx;
    vertical-align: middle;
  }

  text {
    font-size: 20rpx;
    line-height: 50rpx;
  }
}

.commodity {
  margin-top: 22rpx;

  .commodity-ls {
    height: 150rpx;
    background: #ffffff;
    box-shadow: 0prx 5rpx 5rpx 3rpx #efefef;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 10rpx;

    image {
      width: 100rpx;
      height: 100rpx;
      margin-left: 40rpx;
    }

    .commodity-rt {
      margin-left: 40rpx;
      margin-right: 40rpx;
      width: 70%;

      .commodity-tilte {
        font-size: 30rpx;
        color: #333333;
        font-weight: 550;
      }

      .specification {
        font-size: 26rpx;
        color: #333333;
        margin-top: 16rpx;
        font-weight: 550;
      }

      .commodity-bottom {
        margin-top: 30rpx;
        display: flex;
        justify-content: space-between;

        view {
          font-size: 18rpx;
          color: #fc415e;

          text {
            font-size: 28rpx;
            color: #fc415e;
          }
        }

        .commodity-bottom-amount {
          font-size: 28rpx;
          color: #c1c1c1;
        }
      }
    }
  }

  .commodity-settlement {
    height: 60rpx;
    background: #fff;
    margin: 0 auto;
    box-shadow: 0prx 5rpx 5rpx 3rpx #efefef;
    border-radius: 10rpx;
    font-size: 28rpx;
    color: #5a5a5a;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    text {
      font-size: 24rpx;
      color: #fa425e;
      margin-right: 40rpx;
    }
  }
}

.expand-tip {
  margin-top: -40rpx;

  .gradient-overlay {
    height: 100rpx;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .expand-text {
    color: #b5b6b7;
    font-size: 24rpx;
    margin-right: 6rpx;
  }
}

.orderListLine {
  margin-bottom: 16rpx;
}

.imageFont{
  padding: 10rpx 20rpx 0;
  font-size: 22rpx;
  color: rgb(90, 88, 88);
  font-weight: 100;
  font-stretch: condensed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: justify;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-top: 20px;
}

.map-container {
  height: 50vh;
  margin-top: 0px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  padding-bottom: 30rpx;
}

.map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
